<template>
    <view class="page">
        <view class="content">
            <u--text type="info" margin="8px 0 8px 0" text="请上传身份证正面照片"></u--text>
            <u-upload
                    :fileList="zmImgList"
                    @afterRead="afterRead"
                    @delete="deletePic"
                    name="zm"
                    multiple
                    :maxCount="1"
            >
                <image src="https://cdn.uviewui.com/uview/demo/upload/positive.png"
                       mode="widthFix" style="width: 250px;height: 150px;"></image>
            </u-upload>

            <u--text type="info" margin="8px 0 8px 0" text="请上传国徽面照片"></u--text>
            <u-upload
                    :fileList="fmImgList"
                    @afterRead="afterRead"
                    @delete="deletePic"
                    name="fm"
                    multiple
                    :maxCount="1"
            >
                <image src="https://cdn.uviewui.com/uview/demo/upload/positive.png"
                       mode="widthFix" style="width: 250px;height: 150px;"></image>
            </u-upload>

            <u--text type="info" margin="8px 0 8px 0" text="请上传手持身份证正面照片"></u--text>
            <u-upload
                    :fileList="scImgList"
                    @afterRead="afterRead"
                    @delete="deletePic"
                    name="sc"
                    multiple
                    :maxCount="1"
            >
                <image src="https://cdn.uviewui.com/uview/demo/upload/positive.png"
                       mode="widthFix" style="width: 250px;height: 150px;"></image>
            </u-upload>

            <u-gap height="40"></u-gap>
            <u-row>
                <u-button type="primary" text="确定" @click="finishInput"></u-button>
            </u-row>
        </view>
        <view class="safe-area-inset-bottom"></view>
    </view>
</template>

<script>
    export default {
        name: "upidcard",
        data(){
            return{
                zmImgList:[],
                fmImgList:[],
                scImgList:[],
            }
        },
        methods:{
            // 删除图片
            deletePic(event) {
                this[`${event.name}ImgList`].splice(event.index, 1)
            },
            // 新增图片
            async afterRead(event) {
                // 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
                let lists = [].concat(event.file)
                let fileListLen = this[`${event.name}ImgList`].length
                lists.map((item) => {
                    this[`${event.name}ImgList`].push({
                        ...item,
                        status: 'uploading',
                        message: '上传中'
                    })
                })
                for (let i = 0; i < lists.length; i++) {
                    const result = await this.uploadFilePromise(lists[i].url)
                    let item = this[`${event.name}ImgList`][fileListLen]
                    this[`${event.name}ImgList`].splice(fileListLen, 1, Object.assign(item, {
                        status: 'success',
                        message: '',
                        url: result
                    }))
                    fileListLen++
                }
            },
            uploadFilePromise(url) {
                let server = this.$url + '/api.php/index/file_update';
                return new Promise((resolve, reject) => {
                    uni.uploadFile({
                        url: server,
                        filePath: url,
                        name: 'image[]',
                        success: (res) => {
                            let resp = JSON.parse(res.data);
                            setTimeout(() => {
                                resolve(resp.data.img_url[0]);
                            }, 1000)
                        }
                    });
                })
            },
            finishInput(){
                uni.$emit('update',[
                    this.zmImgList.length > 0 ? this.zmImgList[0].url : '',
                    this.fmImgList.length > 0 ? this.fmImgList[0].url : '',
                    this.scImgList.length > 0 ? this.scImgList[0].url : '',
                ]);
                uni.navigateBack({delta: 1});
            }
        }
    }
</script>

<style scoped>
    .page {
        width: 100%;
        min-height: 100vh;
        background-color: #ffffff;
    }

    .content{
        padding: 20rpx;
    }
</style>